<template>
  <div :style="{width:(isCollapse ? 'calc(100% - 66px)' : 'calc(100% - 66px)')}">
    <el-row :gutter="20">
      <el-col :span="24" style="width: 100%;">
        <el-carousel style="margin-left: 60px; margin-top: 20px; margin-bottom: 20px; border-radius: 10px;">
          <el-carousel-item v-for="item in 3" :key="item">
            <div style="position: relative; padding-top: 50%;"> <!-- 2:1比例容器 -->
              <img
                  :src="`imgs/garbage/g${item}.png`"
                  style="
                  position: absolute;
                  top: 0;
                  left: 0;
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
            ">
            </div>
          </el-carousel-item>
        </el-carousel>
      </el-col>
    </el-row>

    <!-- 最新资讯部分 -->
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card shadow="hover" style="margin:20px 0 20px 60px; border-radius: 12px; border-top: 3px solid #35984b;">
          <div class="card-header">
            <span class="card-title" style="font-size: 20px; color: #35984b;">
              <el-icon><News /></el-icon> 最新资讯
            </span>
          </div>
          <hr style="margin-top: 15px; border-color: #f0f0f0;">
          <div class="card-content">
            <el-table
                :data="noticeArr"
                style="width: 100%"
                @row-click="handleRowClick"
                :row-class-name="tableRowClassName"
                :cell-style="{padding: '12px 0'}"
            >
              <el-table-column  prop="title" width="220">
                <template #default="{row}">
                  <div class="news-title">
                    <el-icon><Document /></el-icon>
                    <span style="margin-left: 8px;">{{ row.title }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column  prop="content" width="500">
                <template #default="{row}">
                  <div class="content-preview">
                    {{ row.content.length > 50 ? row.content.substring(0, 50) + '...' : row.content }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column  prop="createTime" width="180" align="center">
                <template #default="{row}">
                  <el-tag type="info" effect="plain">{{ formatDate(row.createTime) }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column  width="120" align="center">
                <template #default="{row}">
                  <el-button type="success" size="small" plain round @click.stop="viewDetail(row)">
                    <el-icon><View /></el-icon> 详情
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 系统公告和热点资讯 -->
    <el-row :gutter="20" style="margin-bottom: 50px;">
      <el-col :span="14">
        <el-card shadow="hover" style="margin-top:20px; height: 40vh; border-radius: 10px; margin-left: 60px;">
          <div class="card-header">
            <span class="card-title">系统公告</span>
            <el-button type="text" style="float: right; color: #35984b;">
            </el-button>
          </div>
          <hr style="margin-top: 15px;">
          <div class="card-content">
            <el-scrollbar height="30vh">
              <el-timeline>
                <el-timeline-item
                    v-for="(notice, index) in systemNotices"
                    :key="index"
                    :timestamp="formatDate(notice.createTime)"
                    placement="top"
                >
                  <el-card shadow="hover" @click="viewDetail(notice)">
                    <h4>{{ notice.title }}</h4>
                    <p>{{ notice.content.substring(0, 60) + (notice.content.length > 60 ? '...' : '') }}</p>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </el-scrollbar>
          </div>
        </el-card>
      </el-col>
      <el-col :span="10">
        <el-card shadow="hover" style="margin-top:20px; height: 40vh; border-radius: 10px;">
          <div class="card-header">
            <span class="card-title">热点资讯</span>
            <el-button type="text" style="float: right; color: #35984b;">
            </el-button>
          </div>
          <hr style="margin-top: 15px;">
          <div class="hot-news">
            <div
                v-for="(item, index) in hotNews"
                :key="index"
                class="hot-news-item"
                @click="viewDetail(item)"
            >
              <div class="hot-news-index" :class="{'top3': index < 3}">{{ index + 1 }}</div>
              <div class="hot-news-content">
                <div class="hot-news-title">{{ item.title }}</div>
                <div class="hot-news-info">
                  <span class="hot-news-time">{{ formatDate(item.createTime) }}</span>
                  <span class="hot-news-views">
                    <el-icon><View /></el-icon>
                    {{ item.views || 0 }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 资讯详情对话框 -->
    <el-dialog
        v-model="detailDialogVisible"
        :title="currentNotice.title"
        width="40%"
        top="5vh"
    >
      <div class="notice-detail">
        <div class="notice-meta">
<!--          <span>资讯来源: {{ currentNotice.resources }}</span>-->
          <span>发布时间: {{ formatDate(currentNotice.createTime) }}</span>
          <span>浏览次数: {{ currentNotice.views || 0 }}</span>
        </div>
        <div class="notice-content">
          <p v-for="(paragraph, index) in currentNotice.content.split('\n')" :key="index">
            {{ paragraph }}
          </p>
        </div>
        <div v-if="currentNotice.image" class="notice-image">
          <img :src="currentNotice.image" alt="资讯图片">
        </div>
      </div>
      <template #footer>
        <el-button type="info" @click="detailDialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import axios from "axios";
import qs from "qs";
import { News, View, DArrowRight } from '@element-plus/icons-vue'

const isCollapse = ref(false);
const noticeArr = ref([]);
const systemNotices = ref([]);
const hotNews = ref([]);
const detailDialogVisible = ref(false);
const currentNotice = ref({});

const noticeForm = ref({
  title: '',
  content: ''
});

const loadNotice = () => {
  let data = qs.stringify(noticeForm.value);

  axios.get('http://localhost:8080/v1/notice/select?' + data).then((response) => {
    if (response.data.code == 2000) {
      noticeArr.value = response.data.data;
      // 模拟系统公告和热点资讯数据
      systemNotices.value = response.data.data.slice(0, 3);
      hotNews.value = [...response.data.data].sort(() => 0.5 - Math.random()).slice(0, 5);
    } else {
      ElMessage.error(response.data.msg);
    }
  })
}

const formatDate = (dateString) => {
  if (!dateString) return '';
  const date = new Date(dateString);
  return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
}

const viewDetail = (notice) => {
  currentNotice.value = notice;
  detailDialogVisible.value = true;

  // 模拟增加浏览次数
  if (!currentNotice.value.views) {
    currentNotice.value.views = 0;
  }
  currentNotice.value.views++;
}

const handleRowClick = (row) => {
  viewDetail(row);
}

const tableRowClassName = ({ row }) => {
  return row.isNew ? 'new-row' : '';
}

onMounted(() => {
  loadNotice();
})
</script>

<style scoped>
.carousel-caption {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  background-color: rgba(0, 0, 0, 0.3);
  padding: 10px 20px;
  border-radius: 5px;
}

.carousel-caption h3 {
  margin: 0 0 5px 0;
  font-size: 1.5em;
}

.carousel-caption p {
  margin: 0;
  font-size: 1em;
}

.card-header {
  padding: 0 10px;
}

.card-title {
  font-weight: bold;
  font-size: 18px;
  color: #666;
}

.content-preview {
  color: #666;
}

.news-title {
  display: flex;
  align-items: center;
}

.news-title .el-icon {
  margin-right: 8px;
  color: #35984b;
}

.hot-news {
  padding: 5px;
}

.hot-news-item {
  display: flex;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  transition: background-color 0.3s;
}

.hot-news-item:hover {
  background-color: #f5f5f5;
}

.hot-news-index {
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  background-color: #f0f0f0;
  border-radius: 4px;
  margin-right: 12px;
  font-size: 12px;
  color: #666;
}

.hot-news-index.top3 {
  background-color: #35984b;
  color: white;
}

.hot-news-content {
  flex: 1;
}

.hot-news-title {
  font-size: 14px;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hot-news-info {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #999;
}

.hot-news-views {
  display: flex;
  align-items: center;
}

.hot-news-views .el-icon {
  margin-right: 2px;
}

.notice-detail {
  padding: 0 20px;
}

.notice-meta {
  display: flex;
  justify-content: space-between;
  color: #999;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.notice-content {
  line-height: 1.8;
  font-size: 15px;
}

.notice-image {
  margin-top: 20px;
  text-align: center;
}

.notice-image img {
  max-width: 100%;
  max-height: 300px;
  border-radius: 4px;
}

:deep(.el-table .new-row) {
  --el-table-tr-bg-color: #f0f9eb;
}

:deep(.el-timeline-item__timestamp) {
  color: #666;
  font-size: 13px;
}
</style>